<template>
    <div id="helpCut">
        <div class="addBtn">
            <span @click="cssChange(1)" :class=" flag==1?'change':'' ">帮砍记录</span>
            <span @click="cssChange(2)" :class=" flag==2?'change':'' ">发起记录</span>
        </div>
        <!-- --------------没有记录时---------------------- -->
        <div id="coupon-empty" v-if="noSh">
            <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/WechatIMG27.png" />
            <span class="noVoucher">还没有砍价记录哟~</span>
            <button class="btn" @click="goHome">逛逛首页</button>
        </div>
        <!-- --------------有帮砍记录时--------------------- -->
        <div class="vshow" v-if="show" style="margin-top: 1rem;">
            <div v-for="x in list" :shareid="x.shareid" style="overflow: hidden">
                <div class="contest">
                    <ul class="left">
                        <li class="text">{{flag==1?'帮TA':'发起'}}砍价</li>
                        <li class="minutes">{{x.time}}</li>
                    </ul>
                    <ul class="right">
                        <li class="success">{{x.stateMsg}}</li>
                    </ul>
                </div>
                <div class="cutDetail">
                    <ul class="photo">
                        <li><img :src="x.thumb"></li>
                    </ul>
                    <ul class="cut-right">
                        <li class="one" style="-webkit-box-orient: vertical;">{{x.title}}</li>
                        <li class="two">{{x.spec}}</li>
                        <li class="three">
                            <span class="now">当前价</span>
                            <span class="icon">¥</span>
                            <span class="money">{{x.minPrice}}</span>&nbsp;&nbsp;
                            <span class="before" style="text-decoration: line-through; font-size:.24rem; color:#969696">¥{{x.maxPrice}}</span>
                        </li>
                    </ul>
                </div>
                <div class="cut-btn">
                    <img :src="x.hosterImg">
                    <div class="btn">
                        <button class="btn-delect" @click="goOpac(x.id)">删除记录</button>
                        <button class="btn-look" @click="goThree($event,x.cutType)">查看详情</button>
                    </div>
                </div>
                <div class="space"></div>
            </div>
        </div>
        <div class="opaction" v-if="opaction"></div>
        <div class="opaText" v-if="opaText">
            <p>确定要删除此条{{text}}记录吗</p>
            <ul class="opacul">
                <li class="opback" @click="opDelete">取消</li>
                <li class="opsure" @click="sureDelete">确定</li>
            </ul>
        </div>
    </div>
</template>

<script>
import config from "../config/config.js";
import share from "../share/share.js";
import MtaH5 from "mta-h5-analysis";
export default {
    data() {
        return {
            show: Boolean,
            noSh: Boolean,
            opaction: false,
            opaText: false,
            list: [],
            flag: 1,
            text: "",
            id: ""
        };
    },
    methods: {
        cssChange(index) {
            this.flag = index;
            this.show = index;
            this.GetCutHelpRecord(this.flag);
        },
        goHome() {
            this.$router.push("/home/index/00");
        },
        opDelete() {
            (this.opaction = false), (this.opaText = false);
        },
        goOpac(id) {
            if (this.flag == 1) {
                this.text = "帮砍";
            } else {
                this.text = "发起";
            }
            this.id = id;
            (this.opaction = true), (this.opaText = true);
        },
        sureDelete() {
            var value = JSON.stringify({
                    id: this.id,
                    type: this.flag,
                    token: localStorage.getItem("token")
                }),
                key = demo(value);
            axios
                .post(
                    "/Home/cut/DeleteCutRecord",
                    {
                        value: value,
                        key: key
                    },
                    config
                )
                .then(
                    function(response) {
                        if (response.data.code == 200) {
                            this.opaction = false;
                            this.opaText = false;
                            this.GetCutHelpRecord(this.flag);
                        }
                    }.bind(this)
                )
                .catch(function(error) {
                    console.log(error);
                });
        },
        goThree($event, x) {
            var shareid = $event.currentTarget.parentNode.parentNode.parentNode.getAttribute(
                "shareid"
            );
            this.x = x.cutType;
            if (x == 1) {
                this.$router.push("/oneKan/" + shareid);
            } else if (x == 2) {
                this.$router.push("/freeKan/" + shareid);
            } else {
                this.$router.push("/threekan/" + shareid);
            }
        },
        GetCutHelpRecord(type) {
            var value = JSON.stringify({
                    page: 1,
                    type: type,
                    token: localStorage.getItem("token")
                }),
                key = demo(value);
            axios
                .post(
                    "/Home/cut/GetCutHelpRecord",
                    {
                        value: value,
                        key: key
                    },
                    config
                )
                .then(
                    function(response) {
                        if (response.data.code == 200) {
                            if (response.data.data.data == "") {
                                this.noSh = true;
                                this.show = false;
                            } else {
                                this.noSh = false;
                                this.show = true;
                                this.list = response.data.data.data;
                            }
                        }
                    }.bind(this)
                )
                .catch(function(error) {
                    console.log(error);
                });
        },
        scrollEvent(e) {
            sessionStorage.setItem("helpTop", e.target.scrollTop);
        }
    },
    activated() {
        var that = this;
        document
            .getElementById("outer")
            .addEventListener("scroll", this.scrollEvent);
        if (sessionStorage.getItem("helpTop")) {
            document.getElementById("outer").scrollTop = sessionStorage.getItem(
                "helpTop"
            );
        }
        this.GetCutHelpRecord(this.flag);
        share({});
        MtaH5.init({
            sid: "500594815",
            cid: "500595819",
            autoReport: 0,
            senseHash: 0,
            senseQuery: 0,
            performanceMonitor: 0,
            ignoreParams: []
        });
        MtaH5.pgv();
    },
    deactivated() {
        this.$destroy(true);
        document
            .getElementById("outer")
            .removeEventListener("scroll", this.scrollEvent);
    },
    beforeDestroy() {
        document
            .getElementById("outer")
            .removeEventListener("scroll", this.scrollEvent);
    }
};
</script>

<style>
</style>